<script setup>
import { ref } from 'vue'
import api from '@/api'
import { parsePage, parseQuery } from '@/utils'
import { useRoute, useRouter } from 'vue-router'
import { Modal, Message } from '@arco-design/web-vue'
import uploadImage from '@/components/uploadImage.vue'

const $route = useRoute()
const $router = useRouter()

// const listFormData = ref({
//   page: parsePage($route.query.page, 1),
//   title: $route.query.title || '',
// })
const title = ref('')
const pageVal = ref(1)
const pageSize = ref(10)
const listData = ref([])
const listTotal = ref(0)
const listLoading = ref(false)

const getListData = async (page = 1) => {
  listLoading.value = true
  try {
    // listFormData.value.page = page
    // const query = parseQuery(listFormData.value)
    // $router.replace({ query })
    const res = await api.get('feedback/feedbackList', {
      params: {
        title: title.value,
        page,
        pageSize: pageSize.value,
      },
    })
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const resetListData = () => {
  // listFormData.value.title = ''
  title.value = ''
  getListData()
}

getListData()

const formRef = ref()
const formItem = ref()
const formLoading = ref(false)
const formVisible = ref(false)
const formVisible2 = ref(false)
const currentViewFile = ref({})
const viewFile = async (item) => {
  currentViewFile.value = item
  formVisible2.value = true
}
const formData = ref({
  id: null,
  title: '',
  content: '',
  replies: {
    content: '',
  },
  sourceList: [],
})
const formRules = {
  name: [
    {
      required: true,
      message: '请填写分类名称',
    },
  ],
  image: [
    {
      required: true,
      message: '请上传分类图片',
    },
  ],
}

const create = () => {
  formRef.value?.resetFields()
  formVisible.value = true
}

const update = (item) => {
  formRef.value?.resetFields()
  formItem.value = item
  formData.value.id = item.id
  formData.value.title = item.title
  formData.value.content = item.content
  var source = item.image
  var arr = []
  if (source) {
    var sourceList = source.split(',')
    for (let item of sourceList) {
      arr.push({
        type: item.substring(item.lastIndexOf('.') + 1, item.length),
        url: item,
      })
    }
  }
  formData.value.sourceList = arr
  formData.value.replies.content = item.replies ? item.replies.content : null
  formVisible.value = true
}

const formSubmit = async () => {
  // if (await formRef.value.validate()) {
  //   return false
  // }
  if (!formData.value.replies.content) {
    Message.error({
      content: '回复内容不可为空',
    })
    return false
  }

  formLoading.value = true

  try {
    await api.post('feedback/replyFeedBack', {
      content: formData.value.replies.content,
      feedback_id: formData.value.id,
    })
    formVisible.value = false
    getListData()
  } catch (error) {
    console.error(error)
  }

  formLoading.value = false

  return false
}

const del = (item) => {
  console.warn('item', item.id)
  Modal.confirm({
    title: '删除分类',
    content: '您确定要删除吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      const res = await api.get('feedback/delFeedback?id=' + item.id)
      Message.success({
        content: res.message,
      })
      getListData()
    },
  })
}
</script>

<template>
  <div class="page">
    <div class="header">
      <a-form class="page-form"
              layout="inline"
              @submit="getListData()">
        <a-space>
          <a-input v-model.trim="title"
                   placeholder="反馈标题"
                   allow-clear />

          <a-button type="primary"
                    html-type="submit">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>

          <a-button @click="resetListData">
            <template #icon>
              <icon-refresh />
            </template>重置
          </a-button>
        </a-space>
      </a-form>
    </div>

    <a-table :loading="listLoading"
             :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="反馈标题"
                        data-index="title"></a-table-column>
        <a-table-column title="反馈内容"
                        data-index="content"></a-table-column>
        <a-table-column title="创建时间"
                        data-index="created_at"></a-table-column>
        <a-table-column title="回复内容"
                        data-index="replies.content"></a-table-column>
        <!-- <a-table-column title="分类图标" :width="200">
          <template #cell="{ record }">
            <div class="cell-img" style="width: 60px; height: 60px">
              <img :src="record.image" />
            </div>
          </template>
        </a-table-column>
        <a-table-column title="分类名称" data-index="name"></a-table-column> -->
        <a-table-column align="right"
                        :width="88">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary"
                        size="mini"
                        @click="update(record)">编辑</a-button>
              <a-button type="primary"
                        status="danger"
                        size="mini"
                        @click="del(record)">
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal title="反馈详情"
             width="800px"
             :ok-loading="formLoading"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form ref="formRef"
              :model="formData">
        <!-- <a-form-item
          field="image"
          label="分类图标"
          help="请上传jpg、png、gif格式图片、文件大小不能超过1MB"
          validate-trigger="input"
          style="margin-bottom: 10px"
        >
          <uploadImage
            v-model="formData.image"
            width="100px"
            height="100px"
          ></uploadImage>
        </a-form-item> -->
        <a-form-item field="name"
                     label="反馈标题">
          <a-input readonly
                   v-model="formData.title" />
        </a-form-item>
        <a-form-item field="name"
                     label="反馈内容">
          <a-textarea readonly
                      v-model="formData.content"
                      allow-clear />
        </a-form-item>
        <a-form-item v-if="formData.sourceList.length"
                     field="name"
                     label="反馈图片">
          <div class="cori_upload_cells">
            <div class="cori_upload_cell"
                 v-for="(item,index) in formData.sourceList"
                 :key="index">
              <video @click="viewFile(item)"
                     width="100%"
                     v-if="item.type=='mp4'"
                     :src="item.url"></video>
              <img @click="viewFile(item)"
                   v-else
                   :src="item.url"
                   alt="">
            </div>
          </div>
        </a-form-item>
        <a-form-item field="name"
                     label="回复反馈">
          <a-textarea v-model="formData.replies.content"
                      allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="反馈详情"
             width="600px"
             v-model:visible="formVisible2">
      <video class="block"
             autoplay
             width="100%"
             v-if="currentViewFile.type == 'mp4'"
             :src="currentViewFile.url"
             controls></video>
      <img class="block"
           style="width: 100%;"
           v-else
           :src="currentViewFile.url">
    </a-modal>
  </div>
</template>

<style scoped>
.cori_upload_cells {
  display: flex;
  flex-wrap: wrap;
}

.cori_upload_cell {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 5px 5px 0;
  cursor: pointer;
}

.cori_upload_cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cori_upload_cell video {
  width: 100%;
  height: 100%;
}

.icon_close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
}
</style>
